<template>
  <div>
    
    <!-- 1.静态页 -->
    <!-- 3.遍历数据 -->
    <div class="cont">
      <img class="cont_img" :src="require('../../assets/img/logo.png')" alt />
      <div class="form">
        <div>
        
          <input type="text" placeholder="手机号" v-model="user.phone" />
        </div>
        <div>
         
          <input type="text" placeholder="昵称" v-model="user.nickname" />
        </div>
        <div>
        
          <input type="text" placeholder="密码" v-model="user.password" />
        </div>
        <div>
          <button @click="register">注册</button>
        </div>
      </div>
    </div>

    <!-- 点击登录，跳转到index页面 -->
    <!-- <button @click="login">登录</button> -->
    <!-- to 在此时是一个变量  加: -->
    <!-- <router-link :to="{name:'登录'}">登录</router-link> -->
  </div>
</template>

<script>
// 4.引入axios
// import axios from "axios";
import { Toast } from "vant";
import { reqRegister } from "../../http/http";
export default {
  data() {
    return {
      // 2.初始化数组
      user: {
        phone: "",
        nickname: "",
        password: ""
      }
    };
  },
  methods: {
    register() {
      // console.log(this.user);
       if (this.phone === "" && this.password === "") {
          Toast(res.data.msg);
          return;
        }
      //5. 发请求
      reqRegister(this.user).then(res => {
       
        // console.log(res);
        if (res.data.code === 200) {
          // 成功
          Toast(res.data.msg),
            // 跳到登录页面
            this.$router.push("/login");
        // } else {
        //   // 失败
        //   Toast(res.data.msg);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.cont {
  width: 5.2rem;
  height: 4.15rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cont_img {
  width: 3.1rem;
  height: 0.82rem;
  padding: 0 1.05rem;
}
.form {
  margin-top: 0.6rem;
}
input {
  border: none;
  background: none;
  width: 100%;
  height: 0.64rem;
  line-height: 0.64rem;
  border-bottom: 0.01rem solid #ccc;
  color: #ccc;
  font-size: 0.30rem !important;
}
button {
  border: none;
  background-color: none;
  width: 100%;
  height: 0.98rem;
  margin-top: 0.38rem;
  line-height: 0.98rem;
  font-size: 0.27rem;
  color: #fff;
  background-color: #ccc;
}
h3 {
  margin-top: 0.9rem;
}
</style>